<template>
  <div class="recoveryManagement">
    <div class="title">
      <h3>回收点</h3>
    </div>
    <div class="ment-div-form">
      <el-form ref="formData" :model="formData">
        <el-row type="flex" justify="right">
          <el-col :span="3">
            <el-button type="primary" class="ele-btn-submit" @click="addCollectionPosition">添加回收点</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      ref="elTable"
      v-loading="listLoading"
      :data="list"
      :fit="true"
      element-loading-text="正在查询中。。。"
      @selection-change="selectChange"
    >
      <el-table-column type="selection" fixed="left" width="50" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="城市" prop="cityName" />
      <el-table-column label="门店数量" prop="storeNumber" />
      <el-table-column label="地址" prop="detailAddress">
        <template slot-scope="scope">
          <span v-if="scope.row.provinceName!=scope.row.cityName && scope.row.cityName!='市辖区'">{{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.areaName }}{{ scope.row.addressDetail }} </span>
          <span v-else-if="scope.row.provinceName==scope.row.cityName || scope.row.cityName=='市辖区'">{{ scope.row.provinceName }}{{ scope.row.areaName }}{{ scope.row.addressDetail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)">编辑 </el-button>
          <el-button
            type="text"
            class="deleteBtn"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="footer-left">
        <el-button plain size="small" @click="allSelection">全选</el-button>
        <el-button plain size="small" @click="delHospital">删除</el-button>
      </div>
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="limit"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
      />
    </div>
  </div>
</template>

<script>
/** 医生管理 */
import { getToken } from '@/utils/auth'
import { delRecovery, recoveryList } from '@/api/customAPI/shop/recoveryManage'

export default {
  name: 'RecoveryManagement',
  data() {
    return {
      form: {
        page: 1,
        limit: 20,
        shopId: localStorage.getItem('shopId')
      },
      formData: {
        shopId: localStorage.getItem('shopId')
      },
      list: [],
      selectList: [],
      listLoading: true,
      total: 0,
      page: 1,
      limit: 20
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.reloadTableData()
  },
  methods: {
    /** 页码加载初始化*/
    search() {
      this.reloadTableData()
    },
    pageSizeChange(pageSize) {
      this.limit = pageSize
      this.getList()
    },
    currentPageChange(page) {
      this.page = page

      this.getList()
    },
    reloadTableData() {
      this.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    /** 获取回收点列表*/
    getList() {
      const data = {
        page: this.page,
        limit: this.limit,
        shopId: localStorage.getItem('shopId')
      }
      this.listLoading = true
      recoveryList(data).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    /** 添加回收点*/
    addCollectionPosition() {
      this.$router.push({ name: 'addRecovery' })
    },
    /** 编辑*/
    handleUpdate(row) {
      this.$router.push({
        name: 'editRecovery',
        query: {
          p: this.$ed({
            info: row,
            edit: true
          })
        }
      })
    },
    /** 删除回收点*/
    handleDelete(row) {
      const idList = [row.id]
      this.$confirm('是否删除回收点?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delRecovery(idList).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: '删除异常'
          })
        })
      }).catch(() => {
        this.$notify({
          title: '异常',
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** 表格单选触发*/
    selectChange(e) {
      console.log(e)
      this.selectList = []
      e.forEach(element => {
        /* this.id.push(element.id)*/
        this.selectList.push(element.id)
      })
    },
    /** 全选*/
    allSelection() {
      this.$refs.elTable.toggleAllSelection()
    },
    /** 对选择的行进行删除*/
    delHospital() {
      if (this.selectList && this.selectList.length === 0) {
        this.$message.error('请选择需要删除的回收点')
      } else {
        this.$confirm('是否删已选择回收点?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delRecovery(this.selectList).then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.getList()
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: '删除异常'
            })
          })
        }).catch(() => {
          this.$notify({
            title: '异常',
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recoveryManagement {
  padding: 50px 100px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
  ::v-deep .el-button {
    height: 36px;
  }
}
.deleteBtn {
  color: #ff0000;
}
::v-deep .el-table__body .el-table-column--selection .cell {
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 100px 0px;
  .footer-left {
    ::v-deep.el-button {
      width: 100px;
      margin: 0px;
    }
  }
}
</style>
